
<!--右边侧边栏-->
<div id="sidebarR">
    <div class="shoppingCar">
        <span class="iconfont">&#xe614;</span>
        <span class="carText">购物车</span>
        <span class="carNum">0</span>
    </div>
    <div class="list">
        <ul>
            <li class="iconfont yh" tips="我的优惠券">&#xe65f;</li>
            <li class="iconfont wd" tips="我的丽子">&#xe656;</li>
            <li class="iconfont wei" tips="">&#xe652;</li>
            <li class="iconfont sy" tips="回到首页">&#xe648;</li>
            <li class="iconfont db" tips="回到顶部">&#xe65b;</li>
        </ul>
    </div>


</div>
<div class="diseDesc">我的收藏</div>
<!--左边侧边栏-->
<!--头部-->
<div id="header_back">
    <div id="header">
        <div class="shoucang">
            <span class="iconfont span1">&#xe60e;</span>
            <a href="#">收藏丽子</a>
        </div>
        <div class="help">
            <a href="#">帮助中心</a>
        </div>
        <div class="guanzhu">
            <a class="gz" href="#">关注我们</a>
            <span class="iconfont">&#xe64d;</span>
            <div class="guanzhu-bg">
                <div class="list">
                    <a>
                        <img src="../images/gz-weibo.jpg"/>
                    </a>
                </div>
            </div>
        </div>
        <div class="denglu">
            <a href="#">登陆</a><span> | </span>
            <a href="#">免费注册</a>
        </div>
    </div>
</div>
<!--搜索框-->
<div id="search_back">
    <div id="search">

        <div class="logo">
            <a href="#">
                <img src="../images/logo.png">
            </a>
        </div>
        <div class="search">
            <div class="goSearch">
                <input class="txt" type="text" placeholder="请输入商品或品牌"/>
                <input class="sub" type="submit" value=""/>
            </div>
            <ul>
                <li>热搜榜：</li>
                <li><a class="colorChange" href="#">悦诗风云</a></li>
                <li><a href="#">防晒</a></li>
                <li><a class="colorChange" href="#">兰芝</a></li>
                <li><a href="#">面膜</a></li>
                <li><a class="colorChange" href="#">化妆水</a></li>
                <li><a href="#">唇膏/口红</a></li>
                <li><a class="colorChange" href="#">BB霜</a></li>
                <li><a href="#">促销</a></li>
            </ul>
        </div>
        <div class="shoppingCar">
            <div class="container" id="shopCon">
                <span class="iconfont">&#xe614;</span>
                <a href="#">购物车</a>
                <span class="iconfont span2">&#xe64a;</span>
                <div class="box">
                    <div class="shopYc">您的购物车里没有商品</div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--导航-->
<div id="ban_back">
    <div id="ban">
        <ul>
            <li class="sort">
                <a href="#">
                    <span class="iconfont">&#xe607;</span>
                    全部商品分类
                </a>
                <div class="sort-YC">
                    <ul class="ul1">
                        <li>
                            <p>护肤</p>
                            <a href="#">洗面</a>
                            <a href="#">爽肤水</a>
                            <a href="#">防晒</a>
                            <a href="#">卸妆</a>
                            <a href="#">眼部护理</a>
                            <a href="#">面部精华</a>
                            <a href="#">乳液/面霜</a>
                        </li>
                        <li>
                            <p>日化护理</p>
                            <a href="#">BB霜</a>
                            <a href="#">隔离/打底</a>
                            <a href="#">粉底液/膏</a>
                        </li>
                        <li>
                            <p>健康保养</p>
                            <a href="#">BB霜</a>
                            <a href="#">隔离/打底</a>
                            <a href="#">粉底液/膏</a>
                        </li>
                        <li>
                            <p>彩妆</p>
                            <a href="#">BB霜</a>
                            <a href="#">隔离/打底</a>
                            <a href="#">粉底液/膏</a>
                            <a href="#">眼影</a>
                            <a href="#">眼线</a>
                            <a href="#">睫毛膏</a>
                            <a href="#">口红</a>
                            <a href="#">香水</a>
                        </li>

                        <li>
                            <p>化妆工具</p>
                            <a href="#">BB霜</a>
                            <a href="#">隔离/打底</a>
                            <a href="#">粉底液/膏</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="#"><img src="../images/cata-hf-1.jpg"></a></li>
                        <li><a href="#"><img src="../images/cata2.jpg"></a></li>
                        <li><a href="#"><img src="../images/cata3.jpg"></a></li>
                        <li><a href="#"><img src="../images/cata4.jpg"></a></li>
                        <li><a href="#"><img src="../images/cata5.jpg"></a></li>
                        <li><a href="#"><img src="../images/cata6.jpg"></a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">60秒闪购</a>
            </li>
            <li>
                <a href="#">100%正品</a>
            </li>
            <li>
                <a href="#">手机丽子</a>
            </li>
        </ul>
    </div>
</div>

<script>

    $(function(){
        //关注我们的隐藏效果
        $(".guanzhu").on({
            mouseover:function(){
                $(".guanzhu-bg").stop().fadeIn();
                $(".guanzhu-bg").show().stop().animate({
                    top:25,
                },20);
            },
            mouseout:function(){
                $(".guanzhu-bg").stop().fadeOut();
                $(".guanzhu-bg").show().animate({
                    top:33,
                },20);
            }
        });



//购物车的隐藏效果
        $("#shopCon").on({
            mouseover:function(){
                $(".shopYc").stop().slideDown(400)
            },
            mouseout:function(){
                $(".shopYc").stop().slideUp(400)
            }
        });




//    导航部分全部商品分类的隐藏效果
        $(".sort").on({
            mouseover:function(){
                $(".sort-YC").stop().slideDown(400)
            },
            mouseout:function(){
                $(".sort-YC").stop().slideUp(400)
            }
        });



//右边侧边效果
// console.log($(".list li").length)
        $(".list li:not(.wei)").hover(function(){
            $(".diseDesc").html($(this).attr("tips"));
            $top = $(this).offset().top;
            $left = $(this).offset().left - $(".diseDesc").width() - 30;
            console.log($top,$left)
            $(".diseDesc").css({
                top:$top,
                left:$left,
                opacity:0
            }).show().stop().animate({
                left:$left + 30,
                opacity:1,
            },400);
        },function(){
            $(".diseDesc").stop().animate({
                left:$(this).offset().left - $(".diseDesc").width() - 30,
                opacity:0,
            },400);
        });

        $(".wei").hover(function(){

        },function(){

        });

        $(window).scroll(function(){

            var $height = $(window).height();
            if($(window).scrollTop() > $height*1.5){
                $(".db").fadeIn(400);
            }
            $(".db").click(function(){
                $(window).scrollTop(0);
                $(".db").fadeOut(400);

            });
        });

    });

    var flag = true;
    $(".shoppingCar").click(function(){
        if(flag){
            flag = false;
            $("#sidebarR").animate({
                width:280,
            },400);
            $("#sidebarR").animate({
                right:280,
            },400);
        }else{
            flag = true;
            $("#sidebarR").animate({
                width:0,
            },400);
            $("#sidebarR").animate({
                right:0,
            },400);
        }

    });
</script>

